import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import * as gc from 'src/app/global/globalconst';
import { timeout } from 'q';
import { NzTableComponent } from 'ng-zorro-antd';


// 成品发货明细表模型类
export class SendoutDtl{
  id:number;bill_code:string;client_id:number;bill_type:string;
  orderno:string;specification:string;product_name:string;
  colorno:string;pairs:number;kilo:number;meter:number;
  client_process:string;color:string;is_audit:number;client_material:string;
  bill_date:Date;mill:string;
}

@Component({
  selector: 'app-sendoutdetail',
  templateUrl: './sendoutdetail.component.html',
  styleUrls: ['./sendoutdetail.component.css']
})
export class SendoutdetailComponent implements OnInit {
  url:string = gc.server + '/sod/go'
  billCode:string = "";// 发货单据编号
  dataSet:SendoutDtl[] = [];

  billDate:Date;//bill_date - 发货日期
  clientName:string = "";//client_material - 客户名称
  mill:string = '';// 染厂名称

  // 汇总的匹数、公斤、米数
  agg_pair:number = 0;
  agg_kilo:number = 0;
  agg_meter:number = 0;

  @ViewChild('nzTable',{static:false})
  ctlTable:NzTableComponent;

  @ViewChild('rotateDiv',{ static:false })
  ctlRotateDiv:ElementRef;

  @ViewChild('shadow',{ static:false })
  shadow:ElementRef;

  
  @ViewChild('container',{ static:false })
  container:ElementRef;

  // shadowWidth:string = '358px';
  relativeLeft:number = 380;
  relativeLeftTxt:string = '380px';
  

  // 容器的宽、高
  cWidth:string = '';
  cHeight:string = '';

  noDataTip:string = '';


  setNoDataTip(){
    this.noDataTip = '由于超出时效期，本单据明细数据不可再查看！';
  }


  constructor(
    private http:HttpClient,
    private route:ActivatedRoute
  ) { 
    this.billCode = this.route.snapshot.queryParams["billCode"];// 从地址栏重获取参数 - 单据编号
    this.mill = this.route.snapshot.queryParams["mill"];// 从地址栏重获取参数 - 单据编号
    this.getDetails();
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
      setTimeout(() => {
      const tableHeight = this.ctlRotateDiv.nativeElement.clientHeight + 50;
      const bodyWidth = document.body.clientWidth;
      const left = tableHeight < bodyWidth ? bodyWidth : tableHeight;

      this.relativeLeft = left;
      this.relativeLeftTxt = this.relativeLeft + 'px';

      setTimeout(() => {
        this.container.nativeElement.scrollLeft = left;
      }, 200);
    }, 200);

  }

  getDetails(){
    if(!this.billCode) return
    if(this.billCode.length<=0) return

    let reqUrl = this.url + '/'  + this.mill + '/' + this.billCode;
    console.log("获取发货明细数据的请求是：" + reqUrl);
    
    this.http.get<SendoutDtl[]>(reqUrl).subscribe(
      (res:SendoutDtl[]) =>{
        if( res.length<=0 ){
          this.setNoDataTip();
          return
        }

        this.dataSet = res;
        this.clientName = res[0].client_material;
        
        console.log("请求获取发货单明细数据成功！");
        console.log(res);
        
        this.mill = res[0].mill;
        this.billDate = res[0].bill_date;
        this.aggregateArray(res);
        console.log('数组汇总结束');
        
      },error => {
        console.log("请求指定发货单明细数据时出错！");
        this.setNoDataTip();
      }
      
    )
  }

  aggregateArray(data:SendoutDtl[]){
    if( data.length <=0 ) return
    data.forEach(element => {
      this.agg_pair = this.agg_pair + element['pairs'];
      this.agg_kilo = this.agg_kilo + element['kilo'];
      this.agg_meter = this.agg_meter + element['meter'];
    });
  }


  // 判断是偶数则返回true，从而使表格偶数行变色
  isEven(rowIndex:number){
    if( rowIndex %2 === 0 )
      return false;
    else
      return true;
  }


  printSize(e){
    console.log(this.ctlRotateDiv);
    const ctlSize = '表格宽 = ' + this.ctlRotateDiv.nativeElement.clientWidth + ',表格高 = ' + this.ctlRotateDiv.nativeElement.clientHeight;
    // alert(ctlSize);

    const bodySize = 'body 宽 = ' + document.body.clientWidth + ',body 高 = ' + document.body.clientHeight;
    // alert(bodySize);

    this.relativeLeft = this.relativeLeft - 50;
    this.relativeLeftTxt = this.relativeLeft + 'px';
  }

  adapt(c:number):string{

    let style:string='';
    if(c===0){
      style='{"width":"700px"}';
    }else{
      style = '{"padding": "10px";"width": "700px";"transform": "rotate(90deg)";"transform-origin": "left top";"position": "relative;"';
      style = style + '"left":"' + this.ctlRotateDiv.nativeElement.clientHeight + 'px"}';
    }

    return style;
  }

}
